<template>
  <page-header-wrapper>
    <a-card :bordered="false">
      <div class="table-page-search-wrapper">
        <a-row
          type="flex"
          justify="start"
        >
          <span
            v-for="status in AuditStatusArray"
            :key="status.code"
            @click="selected(status.code)"
            style="margin-right: 60px"
            :class="{'active': status.code == auditStatus}"
            class="mouseOn"
          >
            {{ status.message }}
          </span>
        </a-row>
        <a-row
          type="flex"
          justify="start"
          style="margin: 20px 0"
        >
          <a-col
            :span="4"
            style="margin-right: 10px"
          >
            <a-input
              v-model="value"
              placeholder="输入关键字"
              allow-clear
            ></a-input>
          </a-col>
          <a-col :span="4">
            <a-config-provider :auto-insert-space-in-button="false">
              <a-button
                type="primary"
                @click="toSearch"
              >
                查找
              </a-button>
            </a-config-provider>
          </a-col>
        </a-row>
      </div>
      <a-table :scroll="{ x: 1500}" :columns="columns" :data-source="entList" bordered :pagination="pagination" :rowKey="record=>record.id"
      >
        <div
          slot="edit"
          slot-scope="item,record"
        >
          <a @click="toContent(record.id)">{{record.auditStatus === 1 ? "审核" : "查看"}}</a>
        </div>
      </a-table>
    </a-card>
  </page-header-wrapper>
</template>

<script>
const AuditStatusArray = [
  {
    code: -1,
    message: '全部',
  },
  {
    code: 1,
    message: '审核中',
  },
  {
    code: 2,
    message: '已通过',
  },
  {
    code: 3,
    message: '未通过',
  },
]
import { getEntBaseList } from '@/api/entVerify'
export default {
  data() {
    return {
      value: '',
      auditStatus: -1,
      AuditStatusArray: AuditStatusArray,
      entList:[],
      pagination: {
        total: 0,
        pageSize: 10,
        current: 1,
        showSizeChanger: true,
        pageSizeOptions: ['10', '20', '30', '40', '50'],
        showTotal: (total) => `共有 ${total} 条数据`,
        showQuickJumper: true,
        onShowSizeChange: (current, pageSize) => this.onSizeChange(current, pageSize),
        onChange: (page, pageSize) => this.onPageChange(page, pageSize),
      },
      columns: [
        {
          title: '编号',
          dataIndex: 'index',
          width:80,
          align: 'center',
          // customRender: (text, record, index) => `${index + 1}`, // 显示每一行的序
          customRender: (text, record, index) => `${(this.pagination.current-1)*10 + index+1}`, // 显示每一行的序
        },
        {
          title: '企业名称',
          dataIndex: 'entName',
          // align: 'center',
        },
        {
          title: '创建时间',
          dataIndex: 'createTime',
          align: 'center',
        },
        {
          title: '更新时间',
          dataIndex: 'updateTime',
          align: 'center',
        },
        {
          title: '审核状态',
          dataIndex: 'auditStatus',
          align: 'center',
          customRender: (text,record,index)=> this.getStatusMsg(text)
        },
        {
          title: '操作',
          dataIndex: 'edit',
          align: 'center',
          width:100,
          fixed: 'right',
          scopedSlots: { customRender: 'edit' },
        },
      ],
    }
  },
  methods: {
    toSearch() {
      this.pagination.current =1
      this.getList()
    },
    selected(code) {
      this.pagination.current =1
      this.auditStatus = code
      this.getList()
    },
    toContent(entId) {
      // this.$router.push({ name: 'Content' })
      this.$router.push("/infoVerify/Content?id="+entId);
    },
    //变更每页条数
    onSizeChange(current,size){
      this.pagination.current = current;
      this.pagination.pageSize = size;
      this.getList();
    },
    //翻页
    onPageChange(page,pageSize){
      this.pagination.current = page;
      this.getList();
    },
    //获取列表数据
    getList() {
      let _this = this
      let _params = {
        auditStatus: _this.auditStatus,
        keyword: _this.value,
        current: _this.pagination.current,
        size: _this.pagination.pageSize
      }
      // console.log(_params)
      getEntBaseList(_params)
        .then((res) => {
          console.log('企业列表')
          console.log(res)
          if (res.code == 200) {
            _this.pagination.total = res.data.total
            _this.entList = res.data.records
          }
        })
        .catch((error) => {})
    },

    //审核状态转成文字
    getStatusMsg(code){
     let obj = AuditStatusArray.find(el=>el.code == code);
     return obj.message;
    }
  },
  computed: {
    rowSelection() {
      return {
        onChange: (selectedRowKeys, selectedRows) => {
          // console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
        },
      }
    },
  },
  created() {
    this.getList()
  },
}
</script>

<style lang="less" scoped>
.active {
  color: #1890ff !important;
}
.mouseOn:hover {
  cursor: pointer;
  color: #1890ff !important;
}
</style>
